<template>
  <view class="content">
    <view class="card">
      <button
        plain
        class="info-row icon-row flexr align-center"
        open-type="chooseAvatar"
        @chooseavatar="onchooseavatar"
      >
        <text class="label flex-1"> 头像 </text>
        <image class="user-icon" :src="headPortrait || applogo"></image>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </button>
      <view class="divider"></view>
      <view class="info-row flexr align-center">
        <text class="label"> 账号 </text>
        <text class="value flex-1">
          {{ userStore.mobile }}
        </text>
      </view>
      <view class="divider"></view>
      <view class="info-row flexr align-center" @click="showNickDialog">
        <text class="label"> 昵称 </text>
        <text class="value flex-1">
          {{ customerName || "请输入您的昵称" }}
        </text>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </view>
    </view>

    <view class="card">
      <view class="info-row flexr align-center" @click="showDatePicker">
        <text class="label"> 生日 </text>
        <text class="value flex-1">
          {{ birthday || "请选择" }}
        </text>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </view>
      <view class="divider"></view>
      <view class="info-row flexr align-center" @click="showSexPicker">
        <text class="label"> 性别 </text>
        <text class="value flex-1">
          {{ sex || "请选择" }}
        </text>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </view>
    </view>

    <view class="flex-1"></view>
    <view class="primary-button" @click="register"> 确定 </view>

    <uni-popup
      ref="nickRef"
      type="center"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <inputDialog
        title="修改昵称"
        placeholder="请输入昵称"
        :val="userStore.userInfo.customerName"
        @onCancel="onCancelChangeNick"
        @onConfirm="onConfirmChangeNick"
      ></inputDialog>
    </uni-popup>

    <uni-popup
      ref="datePickerRef"
      @change="({ show }) => (datePickerShow = show)"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <myDatePicker
        :show="datePickerShow"
        :years="years"
        :months="months"
        :days="days"
        :val="dateVal"
        @onCancel="onCancelDatePicker"
        @onConfirm="onConfirmDatePicker"
      ></myDatePicker>
    </uni-popup>

    <uni-popup
      ref="sexPickerRef"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <sexPicker
        @onCancel="onCancelSexPicker"
        @onConfirm="onConfirmSexPicker"
      ></sexPicker>
    </uni-popup>
  </view>
</template>

<script setup>
import inputDialog from "@/subpages/widgets/inputDialog.vue";
import myDatePicker from "@/subpages/widgets/myDatePicker.vue";
import sexPicker from "@/subpages/my/sexPicker.vue";
import { readFileBase64 } from "@/tools/tools";
import { ref } from "vue";
import { useUserStore } from "@/store/user";
import { onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore();
import applogo from "@/static/applogo.png";
const url = ref("");
onLoad((options) => {
  url.value = options.url;
});
const headPortrait = ref();
const customerName = ref("");
const birthday = ref("");
const sex = ref("");

const nickRef = ref(null);
const datePickerRef = ref(null);
const datePickerShow = ref(false);
const sexPickerRef = ref(null);
function getAvaliableYMD() {
  const date = new Date();
  const years = [];
  const year = date.getFullYear();
  const months = [];
  const month = date.getMonth() + 1;
  const days = [];
  const day = date.getDate();
  for (let i = 1900; i <= year; i++) {
    years.push(i + "");
  }
  for (let i = 1; i <= 12; i++) {
    months.push(i < 10 ? "0" + i : i + "");
  }
  for (let i = 1; i <= 31; i++) {
    days.push(i < 10 ? "0" + i : i + "");
  }
  return { years, months, days, year, month, day };
}
const initData = getAvaliableYMD();
const years = ref(initData.years);
const months = ref(initData.months);
const days = ref(initData.days);
const dateVal = ref([
  initData.years.indexOf(initData.year + ""),
  initData.months.indexOf(
    initData.month < 10 ? "0" + initData.month : initData.month + ""
  ),
  initData.days.indexOf(
    initData.day < 10 ? "0" + initData.day : initData.day + ""
  ),
]);

async function onchooseavatar(e) {
  const { avatarUrl } = e.detail;
  // console.log("onchooseavatar", avatarUrl)
  const { data } = await readFileBase64(avatarUrl);
  const base64 = `data:image/jpeg;base64,${data}`;
  headPortrait.value = base64;
}
function showNickDialog() {
  nickRef.value?.open();
}
function onCancelChangeNick() {
  console.log("onCancelChangeNick");
  nickRef.value?.close();
}
function onConfirmChangeNick(name) {
  nickRef.value?.close();
  console.log("onConfirmChangeNick", name);
  customerName.value = name;
}
function showDatePicker() {
  datePickerRef.value?.open();
}
function onCancelDatePicker() {
  datePickerRef.value?.close();
}
function onConfirmDatePicker(date) {
  datePickerRef.value?.close();
  console.log("onConfirmDatePicker", date);
  birthday.value = date;
}
function showSexPicker() {
  sexPickerRef.value?.open();
}
function onCancelSexPicker() {
  sexPickerRef.value?.close();
}
function onConfirmSexPicker(s) {
  sexPickerRef.value?.close();
  sex.value = s;
}
async function register() {
  console.log(
    "register",
    userStore.mobile,
    headPortrait.value,
    customerName.value,
    birthday.value,
    sex.value
  );
  // 检查空值
  if (!headPortrait.value) {
    uni.showToast({
      title: "请选择头像",
      icon: "none",
    });
    return;
  }
  if (!customerName.value) {
    uni.showToast({
      title: "请输入昵称",
      icon: "none",
    });
    return;
  }
  if (!birthday.value) {
    uni.showToast({
      title: "请选择生日",
      icon: "none",
    });
    return
  }
  if (!sex.value) {
    uni.showToast({
      title: "请选择性别",
      icon: "none",
    });
    return
  }
  uni.showLoading({
    title: "注册中...",
  });
  const registerSuccess = await userStore.register(
    userStore.mobile,
    customerName.value,
    "",
    birthday.value,
    sex.value,
    headPortrait.value,
  );
  if (registerSuccess) {
    uni.showToast({
      title: "注册成功",
      icon: "success",
    });
    if (url.value) {
      if (url.value.startsWith("/pages")) {
        uni.reLaunch({
          url: url.value,
        });
      } else {
        uni.redirectTo({
          url: url.value,
        });
      }
    } else {
      uni.navigateBack();
    }
  } else {
    uni.showToast({
      title: "注册失败",
      icon: "error",
    });
  }
}
</script>

<style lang="scss">
.content {
  padding-top: 32rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  .card {
    background-color: white;
    border-radius: 12rpx;
    .info-row {
      padding: 0 32rpx;
      height: 96rpx;
      font-size: 28rpx;
      &.icon-row {
        height: 140rpx;
        border: none;
        text-align: left;
      }
      .label {
        color: $text-color1;
      }
      .value {
        color: $text-color5;
        text-align: right;
      }
      .user-icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 48rpx;
      }
      .arrow-right {
        width: 15rpx;
        height: 24rpx;
        margin-left: 12rpx;
      }
    }
  }
  .card + .card {
    margin-top: 24rpx;
  }
}
</style>